<template>
	<view>
		<view class="banner">
			<uv-swiper :list="homeBannerList" keyName="pic" @click="clickBanner"></uv-swiper>
		</view>
		<view class="notice">
			<uv-notice-bar :text="text" fontSize="28rpx" bgColor="#fff" color="#000"></uv-notice-bar>
		</view>
		<view class="menu">
			<uv-grid :col="4" :border="false">
				<uv-grid-item v-for="(item, index) in menus" :key="index">
					<image :src="item.icon" style="border-radius: 50%;width: 80rpx;height: 80rpx;" @click="jumpTo(item.url)" />
					<text class="grid-text">{{ item.text }}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view class="banner" v-if="waistBannerList">
			<uv-swiper :list="waistBannerList" keyName="pic"></uv-swiper>
		</view>
		<view class="content">
			<uv-tabs :list="tabs" @click="clickTab"></uv-tabs>
			<goods v-if="currentTab.index === 0"></goods>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import type { Ad } from '@/api/ad/type';
import { getAdList } from '@/api/ad';
import { BaseResponse } from '@/api/base';
import { baseUrl } from '@/config';
import goods from './goods';

const homeBannerList = ref<Ad[]>([])
const waistBannerList = ref<Ad[]>([])
const text = ref<string>('欢迎使用校园服务平台')
const menus = ref<any>([{
	icon: '../../static/express.jpeg',
	text: '快递代取',
	url: '/pages/express/index'
},
{
	icon: '../../static/goods.jpeg',
	text: '二手交易',
	url: '/pages/goods/index'
},
{
	icon: '../../static/job.jpeg',
	text: '兼职赚钱',
	url: '/pages/partTimeJob/index'
}])
const tabs = ref<any>([{
	name: '商品'
}])
const currentTab = ref<Tab>({
	name: '商品',
	index: 0
})

onLoad(() => {
	getHomeBanner()
	getWaistBanner()
})

const getHomeBanner = async () => {
	const res: BaseResponse = await getAdList({ posNo: 'HOME_BANNER' })
	if (!res.data || res.data.length == 0) {
		homeBannerList.value = [{
			pic: '../../static/banner.png'
		}]
	} else {
		homeBannerList.value = res.data.map((item: Ad) => {
			return {
				pic: baseUrl + item.pic,
				url: item.url
			}
		})
	}
}
const clickBanner = (index: number) => {
	if (homeBannerList.value[index].url) {
		// 跳转至第三方承接页，webview
		uni.navigateTo({
			url: '/pages/index/webview/index?url=' + encodeURIComponent(homeBannerList.value[index].url)
		})
	}
}

const getWaistBanner = async () => {
	const res: BaseResponse = await getAdList({ posNo: 'WAIST_BANNER' })
	waistBannerList.value = res.data
}

const jumpTo = (url: string) => {
	if (url) {
		uni.navigateTo({
			url
		})
	}
}

const clickTab = (tab: Tab) => {
	currentTab.value = tab
}


interface Tab {
	name: string
	index: number
}
</script>

<style scoped lang="scss">
.notice {
	margin-top: 15rpx;
}

.menu {
	height: 100%;
	padding: 30rpx 0;
	margin-top: 15rpx;
	border-radius: 20rpx;
	background-color: #fff;
	border: 1px solid #fff;
	box-shadow: 0 0 1rem 0rem rgb(68 135 237 / 31%);
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	.grid-text {
		font-size: 28rpx;
		margin-top: 10rpx;
	}

}

.content {
	background-color: #fff;
	margin-top: 15rpx;
}
</style>
